<template>
    <div class="top">
      <span v-show="isshow" @click="goHome" class="back pa iconfont">&#xe624;</span>
      <div class="tops" v-show="!isshow" :style="op">
        <div class="left"><span @click="goHome" class="iconfont iconfanhui"></span></div>
        <p class="center">热门景点的名字</p>
      </div>
    </div>
</template>

<script>
    export default {
        data(){
          return{
            isshow:true,
            op:{
              opacity:0
            }
          }
        },
        methods:{
          goHome(){
            this.$router.push("/")
          }
        },
        mounted(){
          window.addEventListener('scroll',()=>{
            let top = document.documentElement.scrollTop;
            let opacity = top / 200;
            opacity = opacity>1 ? 1 : opacity;
            if(top > 6){
              this.isshow = false;
              this.op = {
                opacity
              }
            }
            else {
              this.isshow = true;
            }
          })
        }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl"
  .top
    .back
      color: #ffffff
      font-size: .36rem
      font-weight: bold
      top: .1rem
      left: .1rem
      padding: .15rem
      -webkit-border-radius: 50%
      -moz-border-radius: 50%
      border-radius: 50%
      background: rgba(0,0,0,.5)
    .tops
      position: fixed
      width: 100%
      top: 0
      left: 0
      line-height: .88rem
      background: $bgColor
      display flex
      font-size: .28rem
      color: #ffffff
      .left
        margin: 0 .2rem
        font-size: .28rem
      .center
        text-align: center
        font-size: .32rem
        width: 5rem
        margin: 0 auto
        margin-left: 6%
        $txtH()
</style>
